import React from 'react';
import './vertical_2.css';


class Vertical_2 extends React.Component {

    constructor(props){
        super(props);
        this.state={
            contentBgColor:props.contentBgColor
        }
    }
    render(){

        const {datainfo}=this.props;
        const {contentBgColor}=this.state;
        let bgColor=contentBgColor;
        if(bgColor==="transparent"){
            bgColor="#ffffff";
        }
        let div1style={width:'20px',height:'20px',display:'inline-block',background:'#ffbc82'}
        let div2style={height:'20px',fontSize:'12px',display:'inline-block',position:'absolute',background:'#ffbc82',lineHeight:'20px',color:'#ffffff',padding:'0 10px 0 0',textOverflow:'ellipsis',overflow:'hidden',whiteSpace:'nowrap',maxWidth:'calc(100% - 20px)'}
        let div3Style={width:'10px',height:'20px',backgroundColor:bgColor,borderWidth:'0px 0px 0px',borderTopRightRadius:'10px',borderBottomRightRadius:'10px'}
        let timeLineContentStyle={margin:'1em 0',borderRadius:'5px'}



        return<div>
                { datainfo!=null&&datainfo.length>0?
                <div  class=" timeline-vertical-2" >
                {
                    datainfo.map((item,i)=>{
                    let contentdata=item.content;
                    let contentArr=contentdata.split(/\n/g);
                    return <div class="timeline-content-vertical-2">
                                <div class="timeline-img-vertical-2 ">
                                </div>
                                <div class="timeline-datainfo-vertical-2">
                                    <div>
                                        <div class="timeline-date-vertical-2">
                                            <div className="dateinfo-right-vertical-2" style={div1style}><div  style={div3Style}></div></div>
                                            <div className={"dateinfo-vertical-2 wea-f12"} style={div2style} title={item.timeline}>{item.timeline}</div>
                                        </div>
                                    </div>
                                    <div className={"content-vertical-2"} style={timeLineContentStyle}>
                                        <div style={{padding:'5px 10px 5px 10px',fontSize:'12px'}}>
                                            {
                                                contentArr.map((item,i)=>{
                                                    if(item==""){
                                                        return <span style={{display:'block',height:'20px'}}></span>
                                                    }
                                                    return <span className={"wea-f12"} style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                })
                                            }
                                        </div>
                                    </div>
                                </div>
                            </div>
                    })

                }

                 </div>
                :
                <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
                }
            </div>
    }

}
export default Vertical_2